<template>


  <curd-component :config="config" ref="RefTestComponent"></curd-component>

  <a-modal v-model:visible="visible" @ok="handleOk">
    <a-form :model="formState">
      <a-form-item label="请假理由">
        <a-input v-model:value="formState.leaveReason"/>
      </a-form-item>


    </a-form>
  </a-modal>


  <a-modal v-model:visible="visible1" :footer="false" width="80%">

    <div id="myimg"></div>
    <a-timeline>

      <a-timeline-item :color="item.isFin?'green':'red'" v-for="item in xq.line">{{
          item.flowNodeName
        }}
      </a-timeline-item>


    </a-timeline>


    <div v-if="xq.detail.type == 5">
      请假原因: {{ xq.detail.leave_reason }}
      请假天数：{{ xq.detail.day }}
    </div>
    <div v-if="xq.type == 6">
      报销原因: {{ xq.detail.reason }}<br/><br/>

      附件：

      <a v-for="item in xq.detail.filed.split(';').filter(i=>i)" @click="exporBtn(item)">{{
          item
        }}<br/></a>
    </div>


    <br/>
    <br/>
    <br/>
    <a-timeline>
      <a-timeline-item v-for="item in xq.log">
        {{ item.userName }}-{{ item.name }} --{{ item.name1 }}-{{ item.time }} - {{ item.tips }}
      </a-timeline-item>


    </a-timeline>

    <a-form :model="formState">
      <a-form-item label="通过备注">
        <a-input v-model:value="formState.Reason"/>
      </a-form-item>


    </a-form>
    <a-button @click="handleOk">通过</a-button>
    <a-button @click="jj">驳回</a-button>
  </a-modal>
</template>

<script lang="ts">
import CurdComponent from "@/components/CurdComponent.vue";
import {message} from 'ant-design-vue';
import {CurdBaseInterface} from "@/plugs/interface";
import {defineComponent, ref, provide, UnwrapRef, reactive, toRefs} from "vue";
import {
  getCurdlist,
  adduser,
  getRoles,
  exportUser,
  delmytask,
  updateUser,
  qjpost,
  myHandleTask,
  gettaskdl,
  taskNof,
  taskOkf, myHandleTaskf, gettaskdlf
} from "@/http/mockTest";
import axios from "axios";

const cache = {
  Reason: '',

}

let token: any = localStorage.getItem("token")


export default defineComponent({
  setup() {
    const RefTestComponent: any = ref(null)
    const menuitem: any = ref(null);
    const State = reactive({
      rolesList: [],
      formState: JSON.parse(JSON.stringify(cache)),
      xq: {},
    });
    const visible = ref<boolean>(false);
    const visible1 = ref<boolean>(false);
    const isAdd = ref<number>(1);

    const taskId: any = ref<number>(0);


    const sendGrandson = function (a: any) {
      console.log(a)
    }
    provide('addBtn', sendGrandson)
    const add = () => {
      isAdd.value = 1
      State.formState = JSON.parse(JSON.stringify(cache))
      visible.value = true
    }

    const editFn = (data) => {


      taskId.value = data.processInstanceId

      gettaskdlf(data.processInstanceId).then(res => {
        visible1.value = true
        State.xq = res

      })

      let token: any = localStorage.getItem("token")
      axios(
          {
            method: "get",
            url: "/api/task/pic/" + data.processInstanceId,
            responseType: "blob", // 表明返回服务器返回的数据类型
            headers: {
              "Authorization": token ? token : "no-token",
            },
          }
      ).then(res => {

        let imgs: any = document.getElementById("myimg")
        imgs.innerHTML = "";
        let downloadElement: any = document.createElement("img");
        downloadElement.width = "1000";
        let blob = new Blob([res.data]);

        downloadElement.src = window.URL.createObjectURL(blob)
        menuitem.value = window.URL.createObjectURL(blob)
        imgs.appendChild(downloadElement)

      })


    }
    const handleOk = () => {
      taskOkf(taskId.value, State.formState).then(res => {
        message.info('审批成功成功')
        visible1.value = false
        RefTestComponent.value.getData();
      })


    }

    const jj = () => {
      taskNof(taskId.value, State.formState).then(res => {
        message.info('审批成功成功')
        visible1.value = false
        RefTestComponent.value.getData();
      })


    }

    const exporBtn = (usr) => {

      let token: any = localStorage.getItem("token")


      axios(
          {
            method: "get",
            url: "api/task/file/" + usr,
            responseType: "blob", // 表明返回服务器返回的数据类型

            headers: {
              "Authorization": token ? token : "no-token",
            },
          }
      ).then(res => {
        console.log(res)


        // 处理返回的文件流
        let blob = new Blob([res.data]);

        const fileName1 = res.headers["content-disposition"].split('attachment;filename=')[1];
        //获取fileName,截取content-disposition的filename；按=分割，取最后一个
        const fileName = decodeURI(fileName1);
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); //创建下载的链接
        console.log(href)
        downloadElement.href = href;
        downloadElement.download = fileName; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放blob


      })

    }

    /*   getmytask().then((res1: any) => {


         let res: any = JSON.parse(JSON.stringify(res1))
         res.records.forEach((item, index) => {
           console.log(res.records[index].taskId)
           res.records[index].id = res.records[index].taskId
         })
         console.log(res)
         State.rolesList = res

       })*/


    const config: CurdBaseInterface = {

      table: {
        columns: [
          {
            title: "id",
            dataIndex: "id",
            key: 'id',
          },
          {
            title: "processInstanceId",
            dataIndex: "processInstanceId",
            key: "processInstanceId",
          },
          {
            title: "发起人",
            dataIndex: "fqr",
            key: "fqr",
          },

          {
            title: "name",
            dataIndex: "name",
            key: 'name',
          },
          {
            title: "发起时间",
            dataIndex: "created",
            key: "created",
          },
          {
            title: "当前进度",
            dataIndex: "curNode",
            key: "curNode",
          },
          {
            title: "操作",
            dataIndex: "action",
            key: "action",
          },
        ],
        http: myHandleTaskf,
        deleteFn: delmytask,
        editFn: editFn,

      },
    };


    return {
      config,
      handleOk,
      jj,
      visible,
      visible1,
      RefTestComponent,
      ...toRefs(State),
      isAdd,
      exporBtn
    };
  },
  components: {
    "curd-component": CurdComponent,
  },
});
</script>
